<template>
  <vxe-modal
    v-model="visibleCom"
    v-loading="loading"
    v-bind="$attrs"
    :resize="resize"
    :min-width="minWidth"
    :height="height"
    :width="width"
    :z-index="zIndex"
    :title="title"
    :element-loading-text="$store.state.loading.text"
    :element-loading-spinner="$store.state.loading.spinner"
    :element-loading-background="$store.state.loading.background" 
    :show-footer="showFooter"
    @close="handleClose"
    @zoom="handleZoom"
  >
    <slot
      slot="default"
      name="default"
    />
    <template slot="footer">
      <slot name="footer" />
      <el-button
        type="default"
        plain
        class="close"
        @click="handleClose"
      >
        关闭
      </el-button>
    </template>
  </vxe-modal>
</template>

<script>
/**
   * 弹窗组件
   * @author maolin
   */
export default {
  name: "ErpModal",
  props:{
    /**
     * 标题
     * @public
     */
    title: {
      type: String,
      default: '提示'
    },
    /**
     * 是否显示弹窗
     * @public
     */
    visible: {
      type: Boolean,
      default: false
    },
    /**
     * 显示底部
     * @public
     */
    showFooter: {
      type: Boolean,
      default: true
    },
    /**
     * 是否加载中
     * @public
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * 是否可自定义宽高
     * @public
     */
    resize: {
      type: Boolean,
      default: true
    },
    /**
     * 设置弹窗的zIndex
     * @public
     */
    zIndex: {
      type: Number,
      default: 1200
    },
    /**
     * 弹窗宽度
     * @public
     */
    width: {
      type: String,
      default: '98%'
    },
    /**
     * 弹窗最小宽度
     * @public
     */
    minWidth: {
      type: String,
      default: '800px'
    },
    /**
     * 弹窗高度
     * @public
     */
    height: {
      type: String,
      default: '98%'
    },
  },
  computed: {
    visibleCom: {
      get () {
        return this.visible;
      },
      set (val) {
        this.$emit('update:visible', val);
      }
    },
  },
  methods: {
    /**
     * 通知父组件关闭弹窗
     * @public
     */
    handleClose () {
      /**
       * 通知父组件关闭弹窗
       * @public
       */
      this.$emit('close');
    },
    /**
     * 通知父组件缩放
     * @public
     */
    handleZoom () {
      /**
       * 通知父组件缩放
       * @public
       */
      this.$emit('zoom');
    }
  }
};
</script>

<style lang="less" scoped>
    ::v-deep{
        .vxe-modal--box {
            .vxe-modal--footer{
                background-color: #F6F7F9;
            }
        }
    }
</style>
